<template>
  <div>
    <!-- <data-table v-bind="parentData"></data-table> -->
    <Card class="margin-bottom">
      <p slot="title">社团管理</p>
      <data-table
        title="社团管理"
        :queryUrl="$api.getDeptByPage"
        :addUrl="$api.addDept"
        :editUrl="$api.updateDept"
        :removeUrl="$api.removeDept"
        pageNumberParamer="page"
        pageSizeParamer="rowsPerPage"
        totalCountsKey='total'
        rowsKey="rows"
        :tableHeaders="tableHeaders"
        :editOption="editOption"
        :addBtn="true"
        :editBtn="true"
        :removeBtn="true"
        :pageSizeDefault="3"
        removeKey="id"
        :searchBar="false"
        :inBox="false"
      >
        <div
          slot="btns"
          slot-scope="props"
        >
          <Button
            key="show"
            @click="showNext(props.row)"
            size="small"
            type="primary"
            style="marginLeft:5px"
          >下级</Button>
        </div>
      </data-table>
    </Card>
    <Card
      class="margin-bottom"
      v-show="parentId"
    >
      <p slot="title">{{parentName}}下属部门管理</p>
      <data-table
        title="部门管理"
        ref="subTable"
        :queryUrl="$api.getDeptByPage"
        :addUrl="`${$api.addDept}?parentId=${parentId}`"
        :editUrl="$api.updateDept"
        :removeUrl="$api.removeDept"
        pageNumberParamer="page"
        pageSizeParamer="rowsPerPage"
        totalCountsKey='total'
        rowsKey="rows"
        :tableHeaders="tableHeaders"
        :editOption="editOption"
        :addBtn="true"
        :editBtn="true"
        :removeBtn="true"
        :pageSizeDefault="3"
        removeKey="id"
        :inititalLoad="false"
        :searchBar="false"
      ></data-table>
    </Card>
  </div>
</template>
<script>
export default {
  name: "Dept",
  data() {
    const commonHeader = [
      {
        title: "名称",
        key: "name",
        format: "template",
        //该字段是否可添加和编辑
        editable: true,
        //该字段是否可搜索
        searchable: false
      }
    ];
    return {
      editOption: {
          type: "get"
        },
      parentId: "",
      parentName: "",
      tableHeaders: commonHeader
    };
  },
  watch: {
    parentId(val) {
      this.loadSubDept(val);
    }
  },
  methods: {
    showNext({ id, name }) {
      this.parentId = id;
      this.parentName = name;
    },
    loadSubDept(parentId) {
      this.$refs.subTable.load({
        parentId
      });
    }
  }
};
</script>


<style scoped>
</style>